<template>
  <el-dialog
      v-model="visible"
      title="更新任务进度"
      width="500px"
      @close="handleClose"
  >
    <el-form
        ref="formRef"
        :model="form"
        label-width="100px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="当前阶段">
            <el-select :model-value="form.status - 1" disabled placeholder="请选择当前阶段" style="width: 100%">
              <el-option :value="1" label="已接单"/>
              <el-option :value="2" label="正在前往"/>
              <el-option :value="3" label="物品已取到"/>
              <el-option :value="4" label="等待确认"/>
              <el-option :value="5" label="完成"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="更新阶段">
            <el-select v-model="form.status" disabled placeholder="请选择当前阶段" style="width: 100%">
              <el-option :value="1" label="已接单"/>
              <el-option :value="2" label="正在前往"/>
              <el-option :value="3" label="物品已取到"/>
              <el-option :value="4" label="等待确认"/>
              <el-option :value="5" label="完成"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>


      <el-form-item label="进度描述">
        <el-input
            v-model="form.description"
            :rows="3"
            placeholder="请描述当前进度"
            type="textarea"
        />
      </el-form-item>

      <el-form-item label="上传图片">
        <BaseUpload v-model="form.images" type="image-list"></BaseUpload>
      </el-form-item>

      <el-form-item label="异常报告">
        <el-switch v-model="form.isAbnormal"/>
        <el-input
            v-if="form.isAbnormal"
            v-model="form.abnormalReason"
            :rows="2"
            placeholder="请描述异常情况"
            style="margin-top: 8px"
            type="textarea"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button :loading="submitting" type="primary" @click="handleSubmit">
          更新进度
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {reactive, ref, watch} from 'vue'
import request from '@/utils/request'
import BaseUpload from "@/components/common/BaseUpload.vue";

const props = defineProps({
  modelValue: Boolean,
  taskData: Object
})

const emit = defineEmits(['update:modelValue', 'updated'])

const visible = ref(false)
const submitting = ref(false)
const formRef = ref()

// 表单数据
const form = reactive({
  status: 1,
  images: [],
  description: '',
  isAbnormal: false,
  abnormalReason: ''
})

// 监听显示状态
watch(() => props.modelValue, (val) => {
  visible.value = val
  if (val && props.taskData) {
    const taskStages = props.taskData.taskStages
    form.status = taskStages.length === 0 ? 1 : taskStages[0].status + 1
  }
})

watch(visible, (val) => {
  emit('update:modelValue', val)
})

// 提交表单
const handleSubmit = async () => {
  submitting.value = true

  const progressData = {
    taskId: props.taskData.id,
    status: form.status,
    description: form.description,
    images: form.images,
    isAbnormal: form.isAbnormal ? 1 : 0,
    abnormalReason: form.abnormalReason
  }

  await request.post('/taskStage', progressData)
  emit('updated')
  handleClose()
  submitting.value = false
}

// 关闭弹窗
const handleClose = () => {
  visible.value = false
  formRef.value?.resetFields()
  Object.assign(form, {
    status: 1,
    description: '',
    isAbnormal: false,
    abnormalReason: ''
  })
}
</script>
